<template>
	<view>
		<scroll-view scroll-y="true" class="SV_categoryTitle">
			<view class="categoryTitle">
				<view class="categoryName" v-for="(item,index) in categoryList" :key="index"
					:class="categoryNameActive == index?'categoryNameActive':''" @click="yiji(index,item)">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
		<scroll-view class="scroll-Y" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true">
			<view class="categoryList" v-show="er1">
				<view class="categoryListName">
					<view class="categoryListName_line"></view>{{categoryList[yijiid].name}}
				</view>
				<view class="erji" v-for="(sub,idx) in categoryList[yijiid].subCategoryList" :key="idx"
					@click="show(item,index,sub)">
					<view class="categoryListBox">
						<image class="imgcs1" :src="sub.image" lazy-load mode=""></image>
						<text class="te1">{{sub.name}}</text>
					</view>
				</view>
			</view>
			<view class="cs" v-if="er2" @click="fc">
				<image class="imgcs2" :src="option.image" mode=""></image>
				<view class="cs1">
					<text style="color: #545454;font-size: 34rpx;">菜名:{{option.name}}</text>
				</view>
				<view class="cs1 cscolor">
					<text>营养特色:</text>
					<view style="text-indent:2em;">
						{{option.cha}}
					</view>
				</view>
				<view class="cs1">
					<text>原料:</text>
					<view style="text-indent:2em;">
						{{option.material}}
					</view>
				</view>
				<view class="cs1 cscolor">
					<text>做法:</text>
					<view style="text-indent:2em;">
						{{option.method}}
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				yijiid: 0,
				option: {},
				table: {},
				er1: true,
				er2: false,
				categoryList: [], //数据
				categoryNameActive: 0, //当前选中active
				scrollTop: 0, //scroll-top
				scrollVal: 0, //滑动的值
				scrollStatus: true, //点击状态，是否能点击
				nodeHeight: [], //存储categoryList的top
				windowHeight: 0,
				windowTop: 0,
			};
		},
		created() {
			 this.getcategoryList()
		},
		methods: {
			async getcategoryList() {
				const datas = await uni.$http.get('/cantlogin/getRecipesData')
				if (datas.statusCode !== 200) return uni.$showMsg()
				this.categoryList=datas.data
			},
			yiji(index, item) {
				this.categoryNameActive = index;
				this.yijiid = index;
				if (this.er2 == true) {
					this.er2 = !this.er2;
					this.er1 = !this.er1;
				}
			},
			show(item, index, sub) {
				this.option = sub;
				this.er1 = !this.er1,
					this.er2 = !this.er2,
					this.table.item = item,
					this.table.index = index
			},
			fc() {
				this.er1 = !this.er1,
					this.er2 = !this.er2
			}
		},
	}
</script>

<style>
	.categoryTitle {
		width: 220rpx;
		float: left;
		height: 100vh;
		border-right: 1px solid #ccc;
	}

	.SV_categoryTitle {
		width: 250rpx;
		height: 100vh;
		float: left;
	}

	.categoryName {
		width: 100%;
		text-align: center;
		height: 120rpx;
		line-height: 120rpx;
		color: #3E3E3E;
	}

	.categoryNameActive {
		font-size: 34rpx;
		background:		#EE799F;
		color: #fff3ed;
	}

	.scroll-Y {
		height: 100vh;
		width: 500rpx;
		float: left;
	}

	.categoryList {
		width: 100%;
		padding-left: 16rpx;
		box-sizing: border-box;
		height: 100vh;
	}

	.categoryListName {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-indent: 20rpx;
		float: left;
	}
	.categoryListBox {
		width: 145rpx;
		/* border: 1px solid #CCCCCC; */
		margin: 30rpx;
		float: left;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		text-align: center;
	}
	.categoryListName_line {
		height: 30rpx;
		background:#EE799F;
		width: 8rpx;
		float: left;
		margin-top: 35rpx;
	}

	.cs{
		margin-top: 0px;
		font-size:30rpx;
		/* margin-right: 15rpx; */
		/* background:#EE799F; */
		color: #545454;
		line-height: 30rpx;
	}
	
	.cs1{
		margin-bottom: 15rpx;
		line-height: 50rpx;
	}
	.cs1>text{
		height: 40px;
		line-height: 40px;
		display: block;
		/* border-top: 1px dashed #545454; */
		font-size: 30rpx;
		font-weight: 600;
		color: #EE799F;
	}
	.cs1 view{
		display: block;
		line-height: 50rpx;
		/* letter-spacing: 2rpx; */
		padding-right: 20rpx;

		/* background-color: #EE6AA7; */
	}
	
	.cscolor{
		/* background: rgba(0, 126, 96, 0.7); */
	}
	
	.imgcs1 {
		width: 155rpx;
		height: 150rpx;
		display: block;
		border-radius: 50%;
		border: pink 1px solid;
		/* padding: 1px; */
	}
	
	.imgcs2{
		width:94%;
		/* margin-left: 20%; */
	}
	.erji text {
		display: inline-block;
		height: 40px;
		/* background: rgba(0, 126, 96, 0.7); */
		color: #545454;
	}
	.te1{
		margin-top: 5px;
	}
</style>
